<template>
<div class="position-content" v-loading="infoLoading">
<!--  参会岗位-->
 <template v-if="positionList.length>0">
   <div class="position" v-for="(item,index) in positionList" :key="item.id" @click="skip(item.id)">
     <div class="content">
       <div class="post">{{ item.jobTitle }}</div>
       <div class="wage" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}</div>
       <div class="wage" v-else>面议</div>
     </div>
     <div class="site">{{ item.jobAddress }}</div>
     <div class="condition">{{ item.condition }}</div>
   </div>
 </template>
  <el-empty v-else style="display: flex;justify-content: center;align-items: center;margin-left: 40%;"></el-empty>
</div>
</template>

<script>
import {getPublishByFairApi} from "@/api/fair";

export default {
  name: "Position",
  data(){
    return{
      infoLoading:false,
      positionList:[
        {
          id: 1,
          post: '大堂经理',
          wage: '3000-5000',
          site: '甘肃省酒泉市肃州区南大街酒泉饭店',
          condition: '酒泉市-肃州区 ·1-3年 ·本科',
        },
      ]
    }
  },
  methods:{
    getList() {
      this.infoLoading = true
      getPublishByFairApi({sId:this.id}).then((res) => {
        this.positionList = res;
      }).finally(() => {
        this.infoLoading = false
      })
    },
    skip(id){
      this.$router.push({ name: 'Detail',query:{id:id} })
    },
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.position-content{
  display: flex;
  flex-wrap: wrap;
  .position{
    width: 777px;
    height: 150px;
    border-radius: 20px;
    border: 3px solid #498CF3;
    padding: 15px 15px;
    box-sizing: border-box;
    line-height: 35px;
    margin: 10px 10px;

    .content{
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      .post{
        font-weight: 900;
      }
      .wage{
        color: #498CF3;
      }
    }
  }
}

</style>
